import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// 使用redux
// 1.引入Provider
import {Provider} from 'react-redux'

// 2.引入 store
import store from "./store/store"

import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
// 导入你的路由组件

import MovieList from './pages/MovieList'
import MovieDetail from './pages/MovieDetail'
import ShopCart from './pages/ShopCart';
import AsyncData from './pages/AsyncData';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* // 3.根组件中包住其它组件、注入store */}
    <Provider store={store}>
      {/* <App /> */}
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<App />}>
              <Route path="/movie_list" element={ <MovieList/>}></Route>
              {/* 动态路由，url地址是变化的
                /movie_detail/123456、/movie_detail/123457
                :id,id 自己取的名字，后面好通过这个id获取 值（123456、123457）
              */}
              <Route path="/movie_detail/:film_id" element={ <MovieDetail/>}></Route>
              <Route path="/cart" element={<ShopCart />}></Route>
              <Route path="/async" element={<AsyncData />}></Route>
          </Route>
        </Routes>
      </BrowserRouter>
      </Provider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
